<template>
  <div class="calendar-container" >
    <div style="overflow:auto; width:100%; padding-bottom: 60px; min-height: 400px">
      <table class="date-table" cellspacing="0" cellpadding="0">
<!--        <tr>
          <th style="width: 50px;text-align: center">
          <th v-for="m in nowMonths()" :key="m.month" >
            {{getMonth(m.month)}}月
          </th>
        </tr>-->
        <tr v-for="user in avatars">
          <th style="width: 50px;text-align: center">
            <div><img :src="user.avatar" class="avatar"></div>
            <div style="font-size: 12px;padding: 2px;">{{user.name}}</div>
          </th>
          <td v-for="m in nowMonths()" :key="m.month" >
            <slot name="dateCell" :data="{day: m.year+'-'+getMonth(m.month)}" :user="user"></slot>
          </td>
        </tr>
      </table>
    </div>
  </div>
</template>

<script>
  export default {
    props: {
    },
    data () {
      return {
        selectDate: [],//选择日期列表
        avatars: []
      }
    },
    created () {

    },
    methods: {
      nowMonths () {
        let res = []
        let nowDate = this.getDate(new Date());
        for(let i=0; i<7;i++){
          res.unshift(this.getNowDate(nowDate.year, nowDate.month));
          if(nowDate.month==0){
            nowDate.year --;
            nowDate.month = 11;
          }else{
            nowDate.month --;
          }
        }
        return res;
      },
      bindAvatars(avatars){
        this.avatars = avatars;
        console.log("bind:"+ JSON.stringify(this.avatars));
      },
      getDate (date) {
        return {
          year: date.getFullYear(),
          month: date.getMonth(),
          day: date.getDay(),
          date: date.getDate()
        }
      },
      getMonth(m){
        m = m+1;
        if(m<10){
          return '0'+m;
        }
        return m;
      },
      getNowDate(year, month){
        if(month<0){
          month = 11;
          year --;
        }
        return {year: year, month: month};
      }
    }
  }
</script>


<style lang="scss"  scoped>
  .calendar-container {
    padding: 5px;
  }
  .year {
    width:100%;
    text-align: left;
    padding: 10px;
    height: 40px;
    position: relative;
    font-weight: bold;
  }
  .week,.date{
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    list-style: none;
  }
  .week {
    border-bottom: .5px solid #ddd;
    margin-bottom: 5px;
  }
  .none-week {
    color: #aaa;
  }

  .date-table{
    width: calc(100% - 10px);
    border-collapse: collapse;
    table-layout: fixed;
    td{
      border: 1px solid lightgray;
      height: 90px;
      font-size: 12px;
      vertical-align: top;
      padding: 3px;
    }
  }

  .avatar{
    width: 30px;
    height: auto;
    margin-right: 0px;
    border-radius: 100%;
    vertical-align: middle;
  }

</style>
